<div class="zhpd bgwhite">
  <div nz-row>
    <div nz-col nzSpan="24">
      <div class="queryBar">
        <span class="queryLabel">车间：</span>
        <nz-select class="queryCmp" nzAllowClear (ngModelChange)="onChangeCj($event)"
          [(ngModel)]="queryParam.workshopid">
          <nz-option *ngFor="let option of cjList" [nzLabel]="option.opName" [nzValue]="option.opValue">
          </nz-option>
        </nz-select>
        <span class="queryLabel">工区：</span>
        <nz-select class="queryCmp" nzAllowClear (ngModelChange)="onChangeGq($event)"
          [(ngModel)]="queryParam.workareaid">
          <nz-option *ngFor="let option of gqList" [nzLabel]="option.opName" [nzValue]="option.opValue">
          </nz-option>
        </nz-select>
        <span class="queryLabel">车站：</span>
        <nz-select class="queryCmp" nzAllowClear [(ngModel)]="queryParam.stationid"
          (ngModelChange)="onChangeCz($event)">
          <nz-option *ngFor="let option of czList" [nzLabel]="option.opName" [nzValue]="option.opValue">
          </nz-option>
        </nz-select>
        <span class="queryLabel">设备类型：</span>
        <nz-tree-select [nzDropdownStyle]="treeNodeStyle" class="queryCmp" [nzDropdownMatchSelectWidth]="false"
          [nzNodes]="devTypeSelect" nzShowSearch [(ngModel)]="queryParam.devtypeid"
          (ngModelChange)="devTypeChange($event)">
        </nz-tree-select>
        <span class="queryLabel">报警设备：</span>
        <nz-select [nzDropdownStyle]='{height: "250px",width: "200px"}' nzShowSearch [(ngModel)]="queryParam.dev"
          class="queryCmp">
          <nz-option nzCustomContent nzValue="">全部</nz-option>
          <nz-option *ngFor="let data of devNodes" nzCustomContent [nzValue]="data.VC_NAME" [nzLabel]="data.VC_NAME">
            {{data.VC_NAME}}</nz-option>
        </nz-select>

        <span class="queryLabel">评价情况：</span>
        <nz-select nzShowSearch [(ngModel)]="queryParam.status" class="queryCmp">
          <nz-option nzValue="" nzLabel="全部"></nz-option>
          <nz-option nzValue="健康" nzLabel="健康"></nz-option>
          <nz-option nzValue="亚健康" nzLabel="亚健康"></nz-option>
          <nz-option nzValue="故障" nzLabel="差"></nz-option>
        </nz-select>

        <span class="queryLabel">评分日期：</span>
        <nz-date-picker [(ngModel)]="queryParam._scoredate"></nz-date-picker>

        <button nz-button nzType="primary" (click)="query()"><i nz-icon nzType="search"></i>查询</button>
        <!-- <button nz-button nzType="primary" (click)="test()"><i nz-icon nzType="search"></i>test</button> -->
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="24">
      <nz-table #basicTable [nzData]="main.tableData" nzSize="small" [nzLoadingDelay]="1000" nzBordered
        [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="lockHeadScroll">
        <thead>
          <tr>
            <th nzWidth="50px" nzAlign="center">状态</th>
            <th nzWidth="100px" nzAlign="center">车间</th>
            <th nzWidth="100px" nzAlign="center">工区</th>
            <th nzWidth="100px" nzAlign="center">车站</th>
            <th nzWidth="100px" nzAlign="center">设备类型</th>
            <th nzAlign="center">设备名称</th>
            <th nzWidth="100px" nzAlign="center">评分情况</th>
            <th nzWidth="100px" nzAlign="center">评价情况</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data;index as i" (dblclick)="main.tableDbclick(data)" nz-tooltip
            nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
            <td nzAlign="center">
              <div class="cmiddle" style="max-height:105px;">
                <span [class]="statusFollow(data.status)"></span>
              </div>
            </td>
            <td>
              <div class="cmiddle" style="max-height:105px;">{{data.workshop}}</div>
            </td>
            <td nzAlign="center">
              <div class="cmiddle" style="max-height:105px;">{{data.workarea}}</div>
            </td>
            <td nzAlign="center">
              <div class="cmiddle" style="max-height:105px;">{{data.stationname}}</div>
            </td>
            <td>
              <div class="cmiddle" style="max-height:105px;">{{data.devtypename}}</div>
            </td>
            <td nzAlign="center">
              <div class="cmiddle" style="max-height:105px;">{{data.dev}}</div>
            </td>
            <td>
              <div class="cmiddle" style="max-height:105px;">{{data.score}}</div>
            </td>
            <td>
              <div class="cmiddle" style="max-height:105px;">{{data.status}}</div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="pagination-bar">
        <div class="pageWrap">
          每页
          <nz-select [(ngModel)]="main.selectedValue" (ngModelChange)="main.selectedChange()">
            <nz-option nzValue="20" nzLabel="20"></nz-option>
            <nz-option nzValue="50" nzLabel="50"></nz-option>
            <nz-option nzValue="100" nzLabel="100"></nz-option>
            <nz-option nzValue="200" nzLabel="200"></nz-option>
          </nz-select>
          条&nbsp;&nbsp;&nbsp;总共<span class="pageTotal">{{main.pageTotal}}</span>条
        </div>
        <div class="pageInation">
          <nz-pagination [nzPageSize]="main.selectedValue" [nzPageIndex]="main.pageIndex" [nzTotal]="main.pageTotal"
            (nzPageIndexChange)="main.pageIndexChange($event)">
          </nz-pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<nz-modal [(nzVisible)]="detail.visible" nzTitle="详情" (nzOnCancel)="detail.detailCancel()" [nzFooter]="detail.footer"
  [nzBodyStyle]="{width: '1200px'}" nzWidth="1200px" class="modalPanel zhpd">
  <nz-table #basicTable2 [nzData]="detail.tableData" nzSize="small" [nzLoadingDelay]="1000" nzBordered
    [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="lockHeadScroll2">
    <thead>
      <tr>
        <th nzWidth="100px" nzAlign="center">车站</th>
        <th nzWidth="100px" nzAlign="center">设备类型</th>
        <th nzWidth="150px" nzAlign="center">设备名称</th>
        <th nzAlign="center">扣分项</th>
        <th nzWidth="100px" nzAlign="center">扣分值</th>
        <th nzWidth="100px" nzAlign="center">扣分时间</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable2.data;index as i" (dblclick)="detail.tableDbclick(data)" nz-tooltip
        nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
        <td nzAlign="center">
          <div class="cmiddle" style="max-height:105px;">{{data.STATIONNAME}}</div>
        </td>
        <td>
          <div class="cmiddle" style="max-height:105px;">{{data.DEVTYPENAME}}</div>
        </td>
        <td nzAlign="center">
          <div class="cmiddle" style="max-height:105px;">{{data.DEVNAME}}</div>
        </td>
        <td>
          <div class="cmiddle" style="max-height:105px;">{{data.ALARMTYPENAME||data.ALARMTEXT}}</div>
        </td>
        <td>
          <div class="cmiddle" style="max-height:105px;">{{data.SCORE}}</div>
        </td>
        <td nzAlign="center">
          <div class="cmiddle" style="max-height:105px;">{{data.U_TIME*1000|date:"yyyy-MM-dd HH:mm:ss"}}</div>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <div class="pagination-bar">
    <div class="pageWrap">
      每页
      <nz-select [(ngModel)]="detail.selectedValue" (ngModelChange)="detail.selectedChange()">
        <nz-option nzValue="20" nzLabel="20"></nz-option>
        <nz-option nzValue="50" nzLabel="50"></nz-option>
        <nz-option nzValue="100" nzLabel="100"></nz-option>
        <nz-option nzValue="200" nzLabel="200"></nz-option>
      </nz-select>
      条&nbsp;&nbsp;&nbsp;总共<span class="pageTotal">{{detail.pageTotal}}</span>条
    </div>
    <div class="pageInation">
      <nz-pagination [nzPageSize]="detail.selectedValue" [nzPageIndex]="detail.pageIndex" [nzTotal]="detail.pageTotal"
        (nzPageIndexChange)="detail.pageIndexChange($event)"></nz-pagination>
    </div>
  </div>
</nz-modal>